<template>

  <div class="find-container">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <!-- :hide-left-arrow="true" 这行代码的意思给子组件传值-->
    <MMNavBar title="发现" :hide-left-arrow="true"></MMNavBar>
    <div class="main-box">
      <!-- 导航栏 -->
      <!-- 面试技巧区域 -->
      <div class="interview-box">
        <!-- 标题区域 -->
        <div class="title-box">
          <div class="title">
            面试技巧
          </div>
          <div class="arrow-box">
            <span>查看更多</span>
            <i class="iconfont iconicon_more"></i>
          </div>
        </div>
        <!-- 列表区域 -->
        <div class="interview-list">
          <van-skeleton
            :loading="technicList.length === 0"
            avatar
            title
            :row="10"
          >
          <!-- 这里有一个item是从自己获取的数组中循环出来的单个的数据
          然后通过props传给子组件,在子组件中呈现他们 -->
            <technicItem
              v-for="item in technicList"
              :key="item.id"
              :itemData="item"
            ></technicItem>
          </van-skeleton>
        </div>
      </div>
      <!-- 面经分享 -->
      <div class="share-box">
        <!-- 标题区域 -->
        <div class="title-box">
          <div class="title">
            面经分享
          </div>
          <div class="arrow-box">
            <span>查看更多</span>
            <i class="iconfont iconicon_more"></i>
          </div>
        </div>
        <!-- 列表 -->
        <div class="share-list">
          <van-skeleton
            :loading="shareList.length === 0"
            avatar
            title
            :row="10"
          >
            <shareItem
              v-for="item in shareList"
              :key="item.id"
              :itemData="item"
            ></shareItem>
          </van-skeleton>
        </div>
      </div>
      <van-divider>木有啦</van-divider>
    </div>
  </van-pull-refresh>
  </div>
</template>

<script>
import MMNavBar from '../../components/MMNavBar'
// 导入面试技巧的组件
import technicItem from './technicItem'
import shareItem from './shareItem'
// 接口
import { getTechnicList, getShareList } from '../../api/find'
// 使用了mixin混入,这个方法就不用了
// import { mapActions } from 'vuex'
// 导入混用
import getUserInfoMixin from '../../mixin/getUserInfoMixin'
export default {
  name: 'find',
  // 合并混入
  mixins: [getUserInfoMixin],
  data () {
    return {
      // 面试技巧
      technicList: [],
      // 面经列表
      shareList: [],
      // 是否加载
      isLoading: false
    }
  },
  // 注册组件
  components: {
    MMNavBar,
    technicItem,
    shareItem
  },
  created () {
    // 获取元信息
    console.log(this.$route.meta.title)
    getTechnicList({ limit: 3 }).then(res => {
      // console.log(res)
      this.technicList = res.data.data.list
    })
    getShareList({ limit: 3 }).then(res => {
      // console.log(res)
      this.shareList = res.data.data.list
    })
    // 页面一打开,就偷偷获取用户数据
    // 引入混用,这个也不需要了
    // this.asyncGetUserInfo()
  },
  methods: {
    // 引入混用,这个就不用了
    // ...mapActions(['asyncGetUserInfo']),
    async onRefresh () {
      // 更新数据的逻辑,先清空,让骨架屏显示出来
      this.technicList = []
      this.shareList = []
      // loading
      this.$toast.loading()
      const techRes = await getTechnicList({ limit: 3 })

      const shareRes = await getShareList({ limit: 3 })
      // 关闭下拉的loading
      // 为了视觉效果 人为的延迟一会会
      // 工作中不用再去加延迟了
      setTimeout(() => {
        this.isLoading = false
        this.technicList = techRes.data.data.list
        this.shareList = shareRes.data.data.list
      }, 1000)
    }
  }
}
</script>

<style lang="less">
.van-nav-bar__title {
  font-size: 18px;
}
.find-container {
  .main-box {
    background: @bg-color;
  }
  .interview-box {
    background: @white-color;
    padding: 0 15px;
    margin-bottom: 10px;
  }
  .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 69px;
    .title {
      font-size: 18px;
      font-weight: 500;
      color: @main-font-color;
    }
    .arrow-box {
      span {
        font-size: 400;
        font-size: 14px;
        color: @minor-font-color;
      }
    }
  }

  .share-box {
    padding: 0 15px;
    background: @white-color;
  }
}
</style>
